<template>
  <div class="app-container">
    <header class="app-header">
      <h1>MateChat NL2UI 演示工具</h1>
      <p class="app-desc">输入自然语言指令，一键生成UI界面（支持：Dashboard、用户表单等）</p>
    </header>
    
    <main class="app-main">
      <div class="input-section">
        <el-input
          v-model="userPrompt"
          placeholder="请输入UI生成指令，例如：'生成一个带月度销售额和产品占比的销售数据Dashboard'"
          type="textarea"
          :rows="3"
          class="prompt-input"
        />
        <el-button 
          type="primary" 
          @click="handleGenerate"
          :loading="isLoading"
          class="generate-btn"
        >
          生成UI界面
        </el-button>
      </div>

      <div class="example-section">
        <h3>示例指令：</h3>
        <div class="example-buttons">
          <el-button 
            v-for="example in examples" 
            :key="example.text"
            type="primary" 
            plain
            size="small"
            @click="userPrompt = example.text"
            class="example-btn"
          >
            {{ example.label }}
          </el-button>
        </div>
      </div>

      <div v-if="componentConfig" class="render-section">
        <h3>生成结果：</h3>
        <ui-renderer :component-config="componentConfig" />
      </div>

      <div v-if="isLoading" class="loading-section">
        <el-icon class="is-loading" :size="30">
          <Loading />
        </el-icon>
        <p>AI正在解析您的指令并生成UI组件...</p>
      </div>

      <el-alert 
        v-if="errorMsg" 
        type="error" 
        :closable="true"
        @close="errorMsg = ''"
        class="error-alert"
        show-icon
      >
        <strong>生成失败：</strong>{{ errorMsg }}
      </el-alert>

      <div v-if="!componentConfig && !isLoading && !errorMsg" class="empty-section">
        <div class="empty-content">
          <el-icon :size="48" color="#909399">
            <Document />
          </el-icon>
          <h3>等待指令输入</h3>
          <p>请输入您想要生成的UI界面描述，或点击上方的示例指令</p>
        </div>
      </div>
    </main>

    <footer class="app-footer">
      <p>基于华为云DevUI MateChat 构建 | {{ currentYear }}</p>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Document, Loading } from '@element-plus/icons-vue'
import UiRenderer from './components/UiRenderer.vue'
import { parseUIInstruction } from './utils/matechatApi'

const userPrompt = ref('生成一个带月度销售额和产品占比的销售数据Dashboard')
const componentConfig = ref(null)
const isLoading = ref(false)
const errorMsg = ref('')

const examples = ref([
  { label: '销售Dashboard', text: '生成一个带月度销售额和产品占比的销售数据Dashboard' },
  { label: '用户注册表单', text: '创建一个包含用户名、手机号、部门的用户注册表单' }
])

const currentYear = computed(() => new Date().getFullYear())

const handleGenerate = async () => {
  if (!userPrompt.value.trim()) {
    errorMsg.value = '请输入UI生成指令'
    return
  }

  isLoading.value = true
  errorMsg.value = ''
  componentConfig.value = null
  
  try {
    const result = await parseUIInstruction(userPrompt.value)
    componentConfig.value = result.component_config
    
  } catch (err) {
    errorMsg.value = err.message
  } finally {
    isLoading.value = false
  }
}
</script>

<style scoped>
.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: 'Microsoft YaHei', sans-serif;
}

.app-header {
  text-align: center;
  margin-bottom: 30px;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 20px;
}

.app-header h1 {
  color: #0066cc;
  font-size: 28px;
  margin-bottom: 10px;
}

.app-desc {
  color: #666;
  font-size: 16px;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.input-section {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.prompt-input {
  flex: 1;
}

.generate-btn {
  width: 140px;
  flex-shrink: 0;
}

.example-section {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
}

.example-section h3 {
  margin-bottom: 12px;
  font-size: 14px;
  color: #666;
}

.example-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.example-btn {
  font-size: 12px;
}

.render-section {
  margin-top: 20px;
}

.render-section h3 {
  margin-bottom: 16px;
  color: #333;
}

.loading-section {
  text-align: center;
  padding: 40px;
  color: #666;
}

.loading-section p {
  margin-top: 16px;
}

.error-alert {
  margin-top: 16px;
}

.empty-section {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
}

.empty-content {
  text-align: center;
}

.empty-content h3 {
  margin: 16px 0 8px;
  color: #666;
}

.app-footer {
  text-align: center;
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid #e8e8e8;
  color: #999;
  font-size: 14px;
}

@media (max-width: 768px) {
  .app-container {
    padding: 16px;
  }
  
  .input-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .generate-btn {
    width: 100%;
  }
}
</style>